<template>
  <div class="evaluation-card" @click="toEvaluationDetail">
    <!-- 文字 -->
    <div class="evaluation-info">
      <div class="evaluation-title">{{ title }}</div>
      <div class="evaluation-brief">{{ brief }}</div>
      <div class="evaluation-badge">
        <div style="width: 100px">
          <i class="el-icon-edit"></i> {{ formattedTestCount }}人已测
        </div>
        <div style="width: 100px">
          <i class="el-icon-chat-dot-square"></i> 评论
          {{ formattedCommentCount }}
        </div>
        <div><i class="el-icon-date"></i> 日期 {{ formattedDate }}</div>
      </div>
    </div>

    <!-- 图片 -->
    <el-image
      style="width: 150px; height: 100px"
      :src="cover"
      fit="fit"
    ></el-image>
  </div>
</template>

<script>
export default {
  props: [
    "brief", //简介
    "cover", //封面
    "createdate", //时间
    "evacount", //测试人数
    "evareplycount", //回复人数
    "title", //标题
    "topiccount", //题目数量
    "type", //类型
    "evaluateid", //唯一id
  ],
  data() {
    return {
      pageSize: 5,
    };
  },
  methods: {
    //跳转到详情
    toEvaluationDetail() {
      // 跳转到该帖子的详情页面
      this.$router.push({
        name: "evaluationdetail", //必须使用路由名称
        params: { evaluateId: this.evaluateid },
      });
    },
  },
  computed: {
    formattedTestCount() {
      const evacount = this.evacount;

      if (evacount < 10000) {
        // 当数字小于5位数时，返回当前数字，并用空格填充到4位
        return evacount;
      } else {
        // 当数字大于5位数时，转换成w表示法，并用空格填充到4位
        const formattedTestCount = (evacount / 10000).toFixed(1);
        return `${formattedTestCount}w`.padStart(4, " ");
      }
    },
    formattedCommentCount() {
      const evareplycount = this.evareplycount;

      if (evareplycount < 10000) {
        // 当数字小于5位数时，返回当前数字，并用空格填充到4位
        return evareplycount;
      } else {
        // 当数字大于5位数时，转换成w表示法，并用空格填充到4位
        const formattedCommentCount = (evareplycount / 10000).toFixed(1);
        return `${formattedCommentCount}w`.padStart(4, " ");
      }
    },

    formattedDate() {
      const today = new Date(this.createdate);
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
      const day = String(today.getDate()).padStart(2, "0");
      const formattedDate = `${year}-${month}-${day}`;
      return formattedDate;
    },
  },
};
</script>

<style scoped>
.evaluation-card {
  display: flex;
  align-items: center;
  padding: 10px 0px 10px 10px;
}

.evaluation-info {
  padding-right: 110px;
  width: 65%;
}

.evaluation-title {
  padding-bottom: 25px;
}
.evaluation-brief() {
  width: 70vw;
}

.evaluation-badge {
  display: flex;
  align-items: center;
  padding-top: 25px;
}
.evaluation-badge > div {
  /* 设置evaluation-badge内部直接子元素div的样式 */
  padding-right: 30px;
  font-family: "Courier New", Courier, monospace;
}
</style>